<template>
  <div class="flt_container">
    <div class="training-notice">仅供培训使用</div>
    <img
      src="./airplane.png"
      alt="Background Image"
      class="flt_background-image"
    />
    <div class="spoilers_1">
      <div style="display: flex">
        <spoilers :speed="0.8" ref="spoilersRef1" />
        <spoilers :speed="0.8" ref="spoilersRef2" />
        <spoilers :speed="1" ref="spoilersRef3" />
        <spoilers :speed="3" ref="spoilersRef4" />
        <spoilers :speed="3" ref="spoilersRef5" />
      </div>
      <div style="margin-left: 18px; display: flex">
        <spoilers :speed="0.5" ref="spoilersRef6" />
        <spoilers :speed="0.5" ref="spoilersRef7" />
      </div>
      <div class="spoilers_message">SPOILERS</div>
    </div>
    <div class="spoilers_2">
      <div style="display: flex">
        <spoilers
          :speed="0.5"
          direction
          style="margin-left: -1px"
          ref="spoilersRef8"
        />
        <spoilers :speed="0.5" direction ref="spoilersRef9" />
      </div>
      <div style="margin-left: 20px; display: flex">
        <spoilers :speed="3" direction ref="spoilersRef10" />
        <spoilers :speed="3" direction ref="spoilersRef11" />
        <spoilers :speed="1" direction ref="spoilersRef12" />
        <spoilers :speed="0.8" direction ref="spoilersRef13" />
        <spoilers :speed="0.8" direction ref="spoilersRef14" />
      </div>
    </div>
    <div class="roll">
      <FltIndex direction message="L ALT" ref="fltCtlRef1" />
      <FltIndex
        direction
        :centre="30"
        style="margin-left: 95px"
        ref="fltCtlRef2"
      />
      <FltIndex
        :centre="30"
        message="R FLPRN"
        style="margin-left: 234px"
        ref="fltCtlRef3"
      />
      <FltIndex message="R ALT" style="margin-left: 100px" ref="fltCtlRef4" />
    </div>
    <div class="tail">
      <FltIndex
        style="margin-left: 20px"
        position="left"
        message="L ELEV"
        ref="elevRef1"
      />
      <Rudder :step="0.05" style="margin-top: 60px" ref="RudderRef" />
      <FltIndex
        style="margin-left: -200px"
        position="right"
        message="R ELEV"
        ref="elevRef2"
      />
    </div>
    <div class="footer">NORMAL</div>
    <Trim ref="ElevRefTrim" class="trim_1" />
    <Trim
      ref="RudderTrim"
      message="RUDDER TRIM"
      :accuracy="1"
      :max="4.05"
      :step="0.1"
      class="trim_2"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import spoilers from "@/views/learning/simulator/components/lower/Flt/Spoilers.vue";
import FltIndex from "@/views/learning/simulator/components/lower/Flt/FltIndex.vue";
import Rudder from "@/views/learning/simulator/components/lower/Flt/Rudder.vue";
import Trim from "@/views/learning/simulator/components/lower/Flt/Trim.vue";
import { useStore } from "vuex";

const store = useStore();
const spoilersRef1 = ref(null);
const spoilersRef2 = ref(null);
const spoilersRef3 = ref(null);
const spoilersRef4 = ref(null);
const spoilersRef5 = ref(null);
const spoilersRef6 = ref(null);
const spoilersRef7 = ref(null);

const fltCtlRef1 = ref(null);
const fltCtlRef2 = ref(null);
const fltCtlRef3 = ref(null);
const fltCtlRef4 = ref(null);

const RudderRef = ref(null);
const ElevRefTrim = ref(null);
const RudderTrim = ref(null);
const elevRef1 = ref(null);
const elevRef2 = ref(null);

onMounted(() => {
  window.addEventListener("keydown", handleKeydown); // 在组件挂载时添加键盘事件监听
  window.addEventListener("keyup", handleKeyup);
});

onBeforeUnmount(() => {
  window.removeEventListener("keydown", handleKeydown);
  window.removeEventListener("keyup", handleKeyup);
});

const handleKeyup = (event) => {
  event.preventDefault(); // 阻止浏览器默认行为
  const key = event.key.toLowerCase(); // 将按键转换为小写
  if (key == "q" || key == "e") {
    ElevRefTrim.value.stop();
  } else if (key == "z" || key == "c") {
    RudderTrim.value.stop();
  } else if (key == "arrowup" || key == "arrowdown") {
    store.dispatch("flt/pitchStop");
  } else if (key == "a" || key == "d") {
    RudderRef.value.stop();
  } else if (key == "arrowleft" || key == "arrowright") {
    store.dispatch("flt/rollStop");
  }
};

const handleKeydown = (event) => {
  event.preventDefault(); // 阻止浏览器默认行为

  const keyActions = {
    arrowleft: rollLeft,
    arrowright: rollRight,
    arrowup: pitchUp,
    arrowdown: pitchDown,
    a: leftYaw, // 统一用小写字母
    d: rightYaw, // 统一用小写字母
    q: addElevTrim,
    e: minusElevTrim,
    z: addRudderTrim,
    c: minusRudderTrim,
  };

  const key = event.key.toLowerCase(); // 将按键转换为小写

  // 如果按键有对应的动作，则执行
  if (keyActions[key]) {
    keyActions[key]();
  }
};

const pitchUp = () => {
  store.dispatch("flt/pitchIncrement");
};

const pitchDown = () => {
  store.dispatch("flt/pitchDecrement");
};

const addRudderTrim = () => {
  RudderTrim.value.addAngle();
};

const minusRudderTrim = () => {
  RudderTrim.value.minusAngle();
};

const addElevTrim = () => {
  ElevRefTrim.value.addAngle();
};

const minusElevTrim = () => {
  ElevRefTrim.value.minusAngle();
};

const leftYaw = () => {
  RudderRef.value.minusIndex();
};

const rightYaw = () => {
  RudderRef.value.addIndex();
};

const rollLeft = () => {
  store.dispatch("flt/rollIncrement");
};

const rollRight = () => {
  store.dispatch("flt/rollDecrement");
};
</script>

<style scoped>
.flt_container {
  position: relative; /* 保证容器有定位 */
  height: 591px;
  width: 634px;
}

.training-notice {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 5px;
  padding-top: 5px;
  z-index: 10;
  color: red;
}

.flt_background-image {
  position: absolute; /* 绝对定位，背景图片在最底层 */
  top: 0;
  left: 0;
  margin-left: 10px;
}
.spoilers_1 {
  display: flex;
  position: relative; /* 必须设置定位，确保其显示在背景图片上方 */
  top: 97px;
  left: 66px;
  width: 200px;
  height: 50px;
  z-index: 10; /* 保证该元素位于背景图片的上层 */
}
.spoilers_2 {
  display: flex;
  position: relative; /* 必须设置定位，确保其显示在背景图片上方 */
  top: 47px;
  left: 369px;
  width: 200px;
  height: 50px;
  z-index: 10; /* 保证该元素位于背景图片的上层 */
}
.spoilers_message {
  font-weight: 600;
  color: rgb(8, 214, 255);
  margin-left: 17px;
  margin-top: 10px;
}
.roll {
  display: flex;
  position: relative; /* 必须设置定位，确保其显示在背景图片上方 */
  top: 65px;
  left: 23px;
  width: 590px;
  height: 100px;
  z-index: 10; /* 保证该元素位于背景图片的上层 */
}
.tail {
  display: flex;
  position: relative;
  width: 320px;
  height: 141px;
  top: 190px;
  left: 157px;
}
.footer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(155, 255, 134);
  width: 110px;
  height: 25px;
  top: 160px;
  left: 262px;
  border: 2px solid rgb(155, 255, 134);
  border-radius: 5px;
}
.trim_1 {
  left: 60px;
}
.trim_2 {
  left: 505px;
  top: -30px;
}
</style>
